.hero-image {
  width: 100%;
  height: auto; /* maintain aspect ratio */
}

.hero-gallery {
  width: 100%;
  /* height: 90vh; */
  display: flex;
  place-content: center;
}

.hero-grid {
  width: 100vw;
  height: 50vh;
  display: flex;
  gap: 1vw;
  justify-content: center;
  align-items: flex-end; /* send to bottom */
  margin: 1vw;
}   

@media (orientation: portrait) {
  .hero-grid {
    width: 30%;
    height: 30%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0, 1vh;
    justify-content: center;
    align-items: center;
    margin: 2vw;
  }
  .hero-gallery {
    width: 100%;
    height: min-content;
    display: flex;
    place-content: center;
    padding-bottom: var(--footer-height);
  }
}

/* cover page iamge "cowboy" */
.fullbleed-cover-image {
  /* width: 100vw; */
  height: 60vh; /* maintain aspect ratio */
  width: auto;
  display : flex;
  position: absolute;
  bottom: var(--footer-height);
  /* padding-right:; */
}

@media (orientation: portrait) {
  .fullbleed-cover-image {
    width: 100vw; /* maintain aspect ratio */
    height: auto;
    display : flex;
    /* position: absolute; */
    /* bottom: var(--footer-height); */
    /* padding-right:; */
  }
}
/* contact page */

/* whole page layout */
.contact-gallery {
  height: 80vh; 
  width: max-content;
  display: flex;
  justify-content: center;
  translate: 0 -5vh;
  flex-direction: column;
  margin-left: clamp(18px, 3vw, 32px);;
}

/* section breakouts */
.contact-grid {
  display: grid;
  grid-template-rows: repeat(4, 10vh 5vh);
  gap: 1vh;
}

.image-link {
  position: relative;
  display: inline-block;
}

/* visible photo */ 
/* these are not related to the grid */
.contact-image-default {
  width: auto;
  height: 100%; /* maintain aspect ratio */
  display: block;
}

/* hover over photo */
.contact-image-hover {
  width: auto;
  height: 100%; /* maintain aspect ratio */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* hover action */
.image-link:hover .contact-image-hover {
  opacity: 1;
}

.contact-text {
  font-family: var(--font-regular);
  font-weight: 300;
  font-size: clamp(6px, 1.25vw, 12px);
  line-height: 1.25em;
  color: var(--g3);
  /* margin-left: .5em; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
}